<!--
 * @Author: fankewen 835656320@qq.com
 * @Date: 2023-12-18 17:50:36
 * @LastEditors: fankewen 835656320@qq.com
 * @LastEditTime: 2023-12-20 14:54:18
 * @FilePath: \symbolimg\demo\src\views\ImgSource\components\edit.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <el-dialog
    title="修改图源信息"
    :visible.sync="dialogVisible"
    width="26%"
    :before-close="close"
  >
    <!-- <el-row>
          <el-col :span="24"
            ><div class="grid-content bg-purple-dark">11111</div
          ></el-col>
        </el-row> -->
    <el-form
      :model="imageFrom"
      label-position="right"
      :rules="rules"
      ref="ruleForm"
    >
      <el-form-item label="图源ID：" label-width="100px" prop="symbolId">
        <el-input
          v-model="imageFrom.symbolId"
          placeholder="请输入图源ID"
          clearable
          :style="{ width: $px2rem('240px') }"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="图源类型：" label-width="100px">
        <el-input
          v-model="imageFrom.DeviceSubtype"
          placeholder="请输入图源类型"
          clearable
          :style="{ width: $px2rem('240px') }"
        ></el-input>
      </el-form-item>
      <el-form-item label="图源子类型：" label-width="100px">
        <el-input
          v-model="imageFrom.DeviceType"
          placeholder="请输入图源子类型"
          :style="{ width: $px2rem('240px') }"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="图源名称：" label-width="100px" prop="imageRemark">
        <el-input
          v-model="imageFrom.imageRemark"
          placeholder="请输入图源名称"
          :style="{ width: $px2rem('240px') }"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="上传图片：" label-width="100px">
        <div class="imgbox">
          <!-- <img class="imgs" @dblclick="amplifyImg" alt="" /> -->
          <imgbox v-if="falg" :img="handlemimg()" class="Previewbox" />
          <i class="el-icon-delete" @click="checkout"></i>
          <input
            v-if="!falg"
            type="file"
            @change="changeimg"
            ref="imgfile"
            accept="image/png, image/jpeg, image/jpg"
          />
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancellation">取 消</el-button>
      <el-button type="primary" @click="determine">提交</el-button>
    </span>
  </el-dialog>
</template>
  <script>
import imgbox from "../../components/ImgPreview.vue";
import { UpdateImageById } from "../../../api/index.js";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入"));
      } else {
        callback();
      }
    };
    var validatePass1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请上传图片"));
      } else {
        callback();
      }
    };
    return {
      imageFrom: {
        symbolId: "",
        DeviceSubtype: "",
        DeviceType: "",
        file: null,
        imageRemark: "",
        source: "mapbox",
      },
      falg: "",
      imagePath: "",
      rules: {
        imageRemark: [{ validator: validatePass, trigger: "blur" }],
        file: [{ validator: validatePass1, trigger: "blur" }],
      },
      //   dialogVisible: false,
    };
  },
  components: {
    imgbox,
  },
  methods: {
    handlemimg() {
      return "http://192.168.8.100/mapbox/images" + this.imagePath;
    },
    amplifyImg() {
      console.log("双击");
    },
    changeimg(e) {
      this.imageFrom.file = e.srcElement.files[0];
      this.falg = false;
    },
    close() {
      this.empty(this.imageFrom);
      this.$emit("cance", false);
    },
    cancellation() {
      this.empty(this.imageFrom);
      this.$emit("cance", false);
    },
    determine() {
      this.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          try {
            let res = await UpdateImageById(this.imageFrom);
            this.$message.success(`${res.message}`);
          } catch (err) {
            this.$message.error(`${err}`);
          } finally {
            this.$emit("deter");
            this.empty(this.imageFrom);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    empty(obj) {
      for (let i in obj) {
        obj[i] = "";
      }
      if (this.$refs.imgfile) {
        this.$refs.imgfile.value = "";
      }
    },
    checkout() {
      this.falg = false;
    },
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => false,
    },
    editList: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    editList: {
      deep: true,
      handler(val) {
        if (Object.keys(val).length > 0) {

          this.imageFrom.symbolId = val.symbolId;
          this.imageFrom.DeviceSubtype = val.deviceSubtype;
          this.imageFrom.DeviceType = val.deviceType;
          this.imageFrom.imageRemark = val.imageRemark;
          this.imageFrom.source = "mapbox";
          this.imagePath = val.imagePath;
          this.falg = false;
          setTimeout(()=>{
            this.falg = true;
          },0)
        }
      },
    },
  },
  mounted() {},
};
</script>
  <style lang='scss' scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px !important;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
::v-deep .imgbox {
  // border: 1px solid red;
  min-height: 40px;
  line-height: 40px;
  position: relative;
  .el-icon-delete {
    color: red;
    position: absolute;
    top: 4px;
    left: 81px;
    display: none;
    font-size: 16px;
    &:hover {
      display: block;
      cursor: pointer;
    }
  }
  .Previewbox:hover + .el-icon-delete {
    display: block;
  }
}
</style>